
window.onload = function(){ //页面加载完后开始
    document.onscroll = function(){ //滚动条滚动后触发
        //获取滚动条位置
        let scroll = document.documentElement.scrollTop
        console.log(scroll)
        //获取视口宽度
        let width = document.documentElement.clientWidth;
        //获取顶部固定块
        let headerwrapper = document.getElementById('header-wrapper');
        let header = document.getElementById('header');
        let search = document.getElementById('search')
        let ordertopwrapper = document.getElementById('order-top-wrapper');
        let ordertop = document.getElementById('order-top');
        let img = document.getElementById('header-img')
        //判断滚动条超过视口宽度的15%时，
        if (scroll > width*0.15) {
            document.styleSheets[0].insertRule(
                `@keyframes change1{
                    0% {opacity:100%;z-index:9999;}
                    99% {opacity:1%;z-index:9999;}
                    100% {opacity:0%;z-index:0;}
                }`
            )
            document.styleSheets[0].insertRule(
                `@keyframes change2{
                    0% {opacity:0%;z-index:0;}
                    1% {opacity:1%;z-index:9999;}
                    100% {opacity:100%;z-index:9999;}
                }`
            )
            header.style.setProperty('animation','change1 200ms linear')
            header.style.setProperty("animation-fill-mode","forwards")
            search.style.setProperty('animation','change2 200ms linear')
            search.style.setProperty("animation-fill-mode","forwards")
        }else{
            document.styleSheets[0].insertRule(
                `@keyframes change1{
                    0% {opacity:100%;z-index:9999;}
                    99% {opacity:1%;z-index:9999;}
                    100% {opacity:0%;z-index:0;}
                }`
            )
            document.styleSheets[0].insertRule(
                `@keyframes change2{
                    0% {opacity:0%;z-index:0;}
                    1% {opacity:1%;z-index:9999;}
                    100% {opacity:100%;z-index:9999;}
                }`
            )
            header.style.setProperty('animation','change2 200ms linear')
            header.style.setProperty("animation-fill-mode","forwards")
            search.style.setProperty('animation','change1 200ms linear')
            search.style.setProperty("animation-fill-mode","forwards")
        }
        if(scroll>width*0.49){
            ordertop.style.position = 'fixed'
            ordertop.style.left = '0'
            ordertop.style.top = '13vw'
            ordertop.style.backgroundColor = 'white'
        }else{
            ordertop.style.position = 'static'
            ordertop.style.backgroundColor = '#f3f3f3'
        }

    }
}